<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jshx.echarts.1.0.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>首页</title>
    <style>
        @font-face {
            font-family: ds;
            src: url('./font/DS-DIGIB-2.ttf');
        }

        html {
            background: url('./image/background.png') no-repeat;
            background-size: cover;
            background-attachment: fixed;
            height: 100%;
            width: 100%;
        }

        body {
            margin: 0 8px;
            height: 100%;
        }

        .main-body {
            display: flex;
            justify-content: center;
        }

        .page-head {
            width: 100%;
            height: 68px;
        }

        .head-img {
            width: 96%;
            height: 68px;
            margin: 0 auto;
            background: url('./image/head.png') no-repeat;
            background-size: 100%;
        }

        .title {
            position: absolute;
            left: 50%;
            top: 10px;
            height: 50px;
            margin-left: -200px;
        }

        .title-text {
            color: white;
            font-size: 22px;
            font-weight: 600;
        }

        .left,
        .middle,
        .right {
            width: 33%;
        }



        #main1 {
            width: 100%;
            height: 300px;
        }

        .main-head {
            font-size: 18px;
            font-weight: 600;
            margin-top: 20px;
            position: relative;
        }

        .main-head>*,
        .title>* {
            display: inline;
            vertical-align: middle;
        }

        .flex-div {
            display: flex;
            height: 50%;
        }

        #main4 {
            width: 55%;
            height: 300px;
        }

        #main2 {
            width: 45%;
            height: 300px;
        }

        #main5,
        #main6,
        #main3 {
            width: 100%;
            height: 200px;
        }

        .middle-head {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .title-arrow {
            vertical-align: middle;
            margin-bottom: 2px;
        }

        .today-num {
            height: 44px;
            width: 32px;
            background-image: linear-gradient(to bottom, #75bb5f 0, #75bb5f 50%, #2b9709 50%, #2b9709 100%);
            border-radius: 5px;
            font-size: 46px;
            vertical-align: middle;
            line-height: 44px;
            text-align: center;
            margin: 0 3px;
            font-family: ds;
        }

        .yesterday-num {
            height: 44px;
            width: 32px;
            background-image: linear-gradient(to bottom, #ffbb59 0, #ffbb59 50%, #ff9600 50%, #ff9600 100%);
            border-radius: 5px;
            font-size: 46px;
            vertical-align: middle;
            line-height: 44px;
            text-align: center;
            margin: 0 3px;
            font-family: ds;
        }


        #today,
        #yesterday {
            display: flex;
            margin: 20px 20px 10px 20px;
        }

        .middle-head-title1 {
            margin-right: 76px;
        }

        #map {
            width: 100%;
            border: 1px solid black;
            height: 600px;
        }

        .bottom-title {
            width: 100%;
            text-align: center;
        }

        .select-div {
            position: absolute;
            right: 20px;
        }

        select {
            background: transparent;
            border: 1px black solid;
            border-radius: 5px;
            line-height: 22px;
            height: 22px;
            vertical-align: middle;
        }

        option {
            background: transparent;
        }

        nav {
            margin: 50px 0;
        }

        .nav-line {
            margin: 0 auto;
            height: 3px;
            width: 977px;
            background: url('./image/navLine.png') no-repeat;
            background-size: 100%;
        }

        .nav-img-div {
            display: flex;
            justify-content: center;
        }

        .nav-img-div p {
            margin: 0;
        }

        .nav-img-div>div {
            margin: 0 20px;
            width: 100px;
            text-align: center;
            height: 57px;
            vertical-align: bottom;
            padding: 10px 0;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7));
        }

        .nav-img-div>div:hover {
            background: linear-gradient(to bottom, #0154ba00, #0154baff);
            color: white;
        }

        nav img {
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="page-head">
        <div class="head-img"></div>
    </div>
    <div class="main-body">

        <div class="left">
            <div class="main-head">
                <img src="./image/btfh1.png">
                <div>盐城市电梯与工单数量占比情况</div>
                <div class="select-div">
                    <select name="year" class="year">
                        <option value="all" selected style="display: none;">年度</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                        <option value="2017">2017</option>
                    </select>
                    <select name="season" class="season">
                        <option value="all" selected style="display: none;">季度</option>
                        <option value="1">第一季度</option>
                        <option value="2">第二季度</option>
                        <option value="3">第三季度</option>
                        <option value="4">第四季度</option>
                    </select>
                </div>

            </div>
            <div id="main1"></div>
            <div class="main-head">
                <img src="./image/btfh1.png">
                <div>故障原因分析</div>
                <div class="select-div">
                    <select name="year" class="year">
                        <option value="all" selected style="display: none;">年度</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                        <option value="2017">2017</option>
                    </select>
                    <select name="season" class="season">
                        <option value="all" selected style="display: none;">季度</option>
                        <option value="1">第一季度</option>
                        <option value="2">第二季度</option>
                        <option value="3">第三季度</option>
                        <option value="4">第四季度</option>
                    </select>
                </div>
            </div>
            <div class="flex-div">
                <div id="main4"></div>
                <div id="main2"></div>
            </div>
        </div>
        <div class="middle">
            <div class="middle-head">
                <div id="today"></div>
                <div id="yesterday"></div>
            </div>
            <div class="middle-head">
                <div class="middle-head-title1"><img src="./image/btfh1.png" class="title-arrow">今日工单<img
                        src="./image/btfh2.png" class="title-arrow">
                </div>
                <div class="middle-head-title2"><img src="./image/btfh1.png" class="title-arrow">昨日工单<img
                        src="./image/btfh2.png" class="title-arrow">
                </div>
            </div>
            <div id="map"></div>
            <div class="main-head bottom-title">
                <img src="./image/fh1.png">
                <div>江苏省13个地级市电梯、维保单位一览</div>
                <img src="./image/fh2.png">
            </div>
        </div>
        <div class="right">
            <div id="main5"></div>
            <div class="main-head">
                <img src="./image/btfh1.png">
                <div>盐城市各区县工单数量情况</div>
                <div class="select-div">
                    <select name="year" class="year">
                        <option value="all" selected style="display: none;">年度</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                        <option value="2017">2017</option>
                    </select>
                    <select name="season" class="season">
                        <option value="all" selected style="display: none;">季度</option>
                        <option value="1">第一季度</option>
                        <option value="2">第二季度</option>
                        <option value="3">第三季度</option>
                        <option value="4">第四季度</option>
                    </select>
                </div>
            </div>
            <div id="main6"></div>
            <div class="main-head">
                <img src="./image/btfh1.png">
                <div>困人时间段统计</div>
                <div class="select-div">
                    <select name="year" class="year">
                        <option value="all" selected style="display: none;">年度</option>
                        <option value="2019">2019</option>
                        <option value="2018">2018</option>
                        <option value="2017">2017</option>
                    </select>
                    <select name="season" class="season">
                        <option value="all" selected style="display: none;">季度</option>
                        <option value="1">第一季度</option>
                        <option value="2">第二季度</option>
                        <option value="3">第三季度</option>
                        <option value="4">第四季度</option>
                    </select>
                </div>
            </div>
            <div id="main3"></div>
        </div>

    </div>
    <nav>
        <div class="nav-img-div">
            <div id="to-index">
                <img src="./image/sy1.png">
                <p>首页</p>
            </div>
            <div>
                <img src="./image/jcxx1.png">
                <p>基础信息</p>
            </div>
            <div>
                <img src="./image/gd1.png">
                <p>工单信息</p>
            </div>
            <div>
                <img src="./image/tj1.png">
                <p>统计分析</p>
            </div>
            <div>
                <img src="./image/xt1.png">
                <p>系统管理</p>
            </div>
        </div>

        <div class="nav-line"></div>
    </nav>
    <script>
        // 盐城市电梯与工单数量占比情况
        var main1 = new HxChartDoublePie('main1');
        main1.option.color = ['#e6e6e6', '#2ba1f9', '#5f7aff', '#0154ba', '#ff9600', '#1e7e00', '#7b0099', '#bc0000', '#ea4800', '#007774', '#703d12', '#b27c54', '#999999'];
        main1.option.title = [
            {
                text: '电梯数量占比',
                x: '25%',
                bottom: 40,
                textAlign: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            {
                text: '工单数量占比',
                x: '75%',
                bottom: 40,
                textAlign: 'center',
                textStyle: {
                    fontSize: 14
                }
            }
        ];
        main1.option.series[0].radius = [0, '50%'];
        main1.option.series[0].center = ["25%", "40%"];
        main1.option.series[0].label = {
            formatter: "{d}%",
            color: 'black'
        }
        main1.option.series[0].labelLine = {
            show: false,
            length: 5,
            length2: 0
        };

        main1.option.series[1].radius = [0, '50%'];
        main1.option.series[1].center = ["75%", "40%"];
        main1.option.series[1].label = {
            formatter: "{d}%",
            color: 'black'
        }

        main1.option.series[1].labelLine = {
            show: false,
            length: 5,
            length2: 0
        };

        var category = ['亭湖', '盐都', '大丰', '东台', '建湖', '射阳', '阜宁', '滨海', '响水'];
        category.forEach(function (value) {
            main1.putDataLeft(value, Math.ceil(Math.random() * 100));
            main1.putDataRight(value, Math.ceil(Math.random() * 100));
        });

        main1.option.series[0].itemStyle.borderColor = '#5594ea';
        main1.option.series[0].itemStyle.borderWidth = 3;
        main1.option.series[1].itemStyle.borderColor = '#63b0fc';
        main1.option.series[1].itemStyle.borderWidth = 3;
        main1.init();

        // 故障原因分析左侧
        var main4 = new HxChartPie('main4');
        main4.option.color = ['#e6e6e6', '#2ba1f9', '#5f7aff', '#0154ba', '#ff9600', '#1e7e00', '#7b0099', '#bc0000', '#ea4800', '#007774', '#703d12', '#b27c54', '#999999'];
        main4.option.series.label = {
            color: 'black',
            formatter: function (params) {
                var params = params.name;
                var str = '';
                var num = 4;
                if (params.length > num) {
                    str += params.substr(0, num) + '\n' + params.substr(num);
                    return str;
                } else {
                    return params;
                }
            },
            align: 'left'
        }
        main4.putData('人为原因', 30);
        main4.putData('导向系统', 22);
        main4.putData('轿厢', 20);
        main4.putData('控制系统', 15);
        main4.putData('曳引系统', 19);
        main4.putData('电气系统', 12);
        main4.putData('安全保护装置', 12);
        main4.putData('门系统', 12);
        main4.putData('外部原因', 12);
        main4.option.legend.show = false;
        main4.option.series.labelLine = {
            show: false,
            length: 5,
            length2: 0
        };
        main4.option.series.itemStyle.borderColor = '#5d9cf0';
        main4.option.series.itemStyle.borderWidth = 3;
        main4.init();

        // 故障原因分析右侧
        var category2 = ['其他', '阻挡关门', '超载', '装修垃圾', '野蛮搬运', '生活垃圾']
        var main2 = new HxChartCrossBar('main2', category2);
        main2.option.legend = {
            show: true,
            bottom: 0
        };
        main2.option.grid.top = 20;
        main2.option.series[0].name = '人为原因故障分析';
        main2.option.yAxis.axisLabel.show = true;
        main2.option.yAxis.axisLine.show = true;
        main2.option.xAxis.axisLine = {
            show: false
        };
        main2.option.xAxis.axisLabel = {
            show: false
        };
        main2.option.xAxis.axisTick = {
            show: false
        };
        main2.option.xAxis.splitLine = {
            show: false
        };
        main2.option.grid.left = 80;
        main2.option.series[0].label = {};
        main2.option.series[0].itemStyle = {
            color: '#ff9600'
        };
        main2.option.series[0].zlevel = 1;
        main2.option.series[0].barWidth = 20;
        main2.option.series[1] = {
            data: [100, 100, 100, 100, 100, 100],
            barWidth: 20,
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
                color: 'rgba(0,0,0,0.2)'
            }
        }

        main2.putData(10);
        main2.putData(20);
        main2.putData(30);
        main2.putData(25);
        main2.putData(15);
        main2.putData(20);

        // 盐城市各区县工单数量情况上方
        var category5 = ['经济开发区', '盐都', '大丰', '东台', '建湖', '射阳', '阜宁', '滨海', '响水'];
        var main5 = new HxChartBar('main5', category5);
        category5.forEach(function (value) {
            main5.putData('昨日工单', value, Math.ceil(Math.random() * 10));
            main5.putData('今日工单', value, Math.ceil(Math.random() * 10));
        });
        main5.option.series[0].barWidth = 20;
        main5.option.series[1].barWidth = 20;
        main5.option.series[1].barGap = 0;
        main5.option.yAxis.splitLine = {
            lineStyle: {
                type: 'dashed'
            }
        };
        main5.option.xAxis.axisLabel.interval = 0;
        main5.option.xAxis.axisLabel.formatter = aXisLabelFormatter;
        main5.option.grid.top = 10;
        main5.option.color = ['#ff9600', '#1e7e00']
        main5.option.yAxis.axisLine = { show: false };
        main5.option.yAxis.axisTick = { show: false };
        main5.option.xAxis.axisTick = { show: false };
        main5.init();

        // 盐城市各区县工单数量情况下方
        var category6 = ['亭湖', '盐都', '大丰', '东台', '建湖', '射阳', '阜宁', '滨海', '响水'];
        var main6 = new HxChartBar('main6', category6);
        category6.forEach(function (value) {
            main6.putData('工单', value, Math.ceil(Math.random() * 10));
        });
        main6.option.yAxis.splitLine = {
            lineStyle: {
                type: 'dashed'
            }
        };
        main6.option.grid.top = 10;
        main6.option.grid.bottom = 10;
        main6.option.legend.show = false;
        main6.option.color = ['#1e7e00'];
        main6.option.series[0].barWidth = 20;
        main6.option.yAxis.axisLine = { show: false };
        main6.option.yAxis.axisTick = { show: false };
        main6.option.xAxis.axisTick = { show: false };
        main6.init();

        // 困人时间段统计
        var category3 = ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24'];
        var main3 = new HxChartLine('main3', category3);
        main3.init();
        main3.option.xAxis.axisTick = {
            interval: 0,
            alignWithLabel: true
        };
        main3.option.xAxis.axisLabel.interval = 0;
        main3.option.yAxis.splitLine = {
            lineStyle: {
                type: 'dashed'
            }
        };
        main3.option.xAxis.boundaryGap = true;
        main3.option.xAxis.axisLabel.rotate = 30;
        main3.putData('困人时间段统计', 9)
        main3.putData('困人时间段统计', 8)
        main3.putData('困人时间段统计', 15)
        main3.putData('困人时间段统计', 5)
        main3.putData('困人时间段统计', 1)
        main3.putData('困人时间段统计', 6)
        main3.putData('困人时间段统计', 8)
        main3.trim();
        main3.option.series[0].symbol = 'none';
        main3.option.series[0].areaStyle = {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ff9600' // 0% 处的颜色
                }, {
                    offset: 1, color: '#ff960000' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        };
        main3.option.series[0].itemStyle = {
            color: '#df8300'
        }
        main3.option.grid.top = 30;
        main3.option.grid.left = 10;
        main3.option.yAxis.name = '单位:百分比';
        main3.init();



        function createTodayNum(id, num) {
            var str = num.toString();
            for (var i = 0; i < str.length; i++) {
                $("#" + id).append('<div class="today-num">' + str[i] + '</div>');
            }
        }

        function createYesterdayNum(id, num) {
            var str = num.toString();
            for (var i = 0; i < str.length; i++) {
                $("#" + id).append('<div class="yesterday-num">' + str[i] + '</div>');
            }
        }

        createTodayNum("today", "0123");
        createYesterdayNum("yesterday", "0123");

        function aXisLabelFormatter(params) {
            var str = '';
            var num = 4;
            if (params.length > num) {
                str += params.substr(0, num) + '\n' + params.substr(num);
                return str;
            } else {
                return params;
            }
        }

        // 导航栏悬停改变图标src
        $('.nav-img-div div').mouseenter(function () {
            var src = $(this).find('img')[0].src.split('.png')[0];
            src = src.substr(0, src.length - 1);
            $(this).find('img')[0].src = src + '.png';
        });

        $('.nav-img-div div').mouseleave(function () {
            var src = $(this).find('img')[0].src.split('.png')[0];
            $(this).find('img')[0].src = src + '1.png';
        })
    </script>
</body>

</html>